<template>
  <div>
    <el-dialog
      title="工单详情"
      width="45%"
      :visible="isShowDetails"
      @close="handleClose"
    >
      <div class="task-status">
        <img class="cancelIcon" src="../../../assets/common/confirm.png" alt="">
        <span class="cancelText">完成</span>
        <img class="cancelImg" src="../../../assets/common/confirm1.png" alt="">
      </div>
      <el-form>
        <el-row>
          <el-col :span="12"><div class="grid-content bg-purple">
            <el-form-item label="设备编号:">
              <span>{{ currentTableList.innerCode }}</span>
            </el-form-item>
          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple">
            <el-form-item label="创建日期:">
              <span>{{ currentTableList. createTime | dayFormateDetail }}</span>
            </el-form-item>
          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple">
            <el-form-item label="完成日期:">
              <span>{{ currentTableList. updateTime | dayFormateDetail }}</span>
            </el-form-item>
          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple">
            <el-form-item label="运营人员:">
              <span>{{ currentTableList.userName }}</span>
            </el-form-item>
          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple">
            <el-form-item label="工单类型:">
              <span>{{ currentTableList.typeName }}</span>
            </el-form-item>
          </div></el-col>

          <el-col v-if="currentTableList.typeId === 2" :span="12"><div class="grid-content bg-purple">
            <el-form-item label="补货数量:">
              <span class="deatils" @click="replennish">补货详情</span>
            </el-form-item>
          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple">
            <el-form-item label="工单方式:">
              <span>{{ currentTableList.createType=== 1 ? '手动' : '自动' }}</span>
            </el-form-item>
          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple">
            <el-form-item label="备注:">
              <span>{{ currentTableList.desc }}</span>
            </el-form-item>
          </div></el-col>
          <el-col v-if="currentTableList.typeId !== 2" :span="12"><div class="grid-content bg-purple map">
            <span class="text">定位：</span>
            <span class="addr el-icon-location-outline">{{ currentTableList.addr }}</span>

          </div></el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <table-replenishment :is-show-replenish.sync="isShowReplenish" :replennish-details="replennishDetails" />
  </div>
</template>

<script>
// import addTask from './addTask.vue'
import tableReplenishment from './tableReplenishment.vue'
import { getReplenishDetails } from '@/api/task'

export default {
  components: { tableReplenishment },
  props: {
    isShowDetails: {
      type: Boolean,
      required: true
    },
    currentTableList: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      dialogVisible: false,
      isShowReplenish: false,
      replennishDetails: []

    }
  },
  created() {
    // console.log(this.currentTableList)
  },
  methods: {
    handleClose() {
      this.$emit('update:isShowDetails', false)
    },
    addTask() {
      this.dialogVisible = true
    },
    async  replennish() {
      try {
        this.isShowReplenish = true
        const { data } = await getReplenishDetails(this.currentTableList.taskId)
        console.log(data)
        this.replennishDetails = data
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
 ::v-deep .el-dialog__title {
    font-size: 16px !important;
    color: #333 !important;
    font-weight: 700;
}
   ::v-deep.el-form {

    .el-form-item{
    margin-bottom: 0px !important;
    .el-form-item__label {
    font-size: 14px;
    color: #606266;
    font-weight: 400;
    width: 120px;
    text-align: center;
    padding: 0;
    }

}
}
.task-status {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    // justify-content: space-evenly;
    height: 54px;
    width: 100%;
    margin-bottom: 25px;
    background-color: hsla(0,0%,92.5%,.39);
    .cancelIcon {
       margin-left: 20px;
    }
    .cancelText {
        width: 362px;
        margin-left:16px ;
    }
}
.deatils {
    color: #5f84ff;
    font-weight: 500;
}
.map{
  display: flex;
  justify-content: center;
  // align-items: center;
  .text{
    flex: 1;
    display: inline-block;
    padding:10px  0  0 40px;
  }
  .addr {
    flex: 2.2;

  }

}

</style>
